<template>
  <div>
    <ye-tou></ye-tou>
    <dao-hang></dao-hang>
    <div>
      <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="6">
          <div class="grid-content">
            <router-link :to="`/order?nums=${name[0]}`">
              <img :src="`/imags/${pic[0]}`" />
              <span class="aum">{{ name[0] }}</span></router-link
            >
            <div class="sty">{{ title[0] }}</div>
            <div class="add">￥{{ price[0] }}<span> 起</span></div>
            <router-link :to="`/order?nums=${name[0]}`">
              <span class="adc">立即预订</span>
            </router-link>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <router-link :to="`/order?nums=${name[1]}`">
              <img :src="`/imags/${pic[1]}`" />
              <span class="aum" style="text-decoration: none">{{
                name[1]
              }}</span></router-link
            >
            <div class="sty">{{ title[1] }}</div>
            <div class="add">￥{{ price[1] }}<span> 起</span></div>
            <router-link :to="`/order?nums=${name[1]}`"
              ><span class="adc">立即预订</span></router-link
            >
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <router-link :to="`/order?nums=${name[2]}`">
              <img :src="`/imags/${pic[2]}`" />
              <span class="aum" style="text-decoration: none">{{
                name[2]
              }}</span></router-link
            >
            <div class="sty">{{ title[2] }}</div>
            <div class="add">￥{{ price[2] }}<span> 起</span></div>
            <router-link :to="`/order?nums=${name[2]}`"
              ><span class="adc">立即预订</span></router-link
            >
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="6">
          <div class="grid-content">
            <router-link :to="`/order?nums=${name[3]}`">
              <img :src="`/imags/${pic[3]}`" />
              <span class="aum" style="text-decoration: none">{{
                name[3]
              }}</span></router-link
            >
            <div class="sty">{{ title[3] }}</div>
            <div class="add">￥{{ price[3] }}<span> 起</span></div>
            <router-link :to="`/order?nums=${name[3]}`">
              <span class="adc">立即预订</span>
            </router-link>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <router-link :to="`/order?nums=${name[4]}`">
              <img :src="`/imags/${pic[4]}`" />
              <span class="aum" style="text-decoration: none">{{
                name[4]
              }}</span></router-link
            >
            <div class="sty">{{ title[4] }}</div>
            <div class="add">￥{{ price[4] }}<span> 起</span></div>
            <router-link :to="`/order?nums=${name[4]}`"
              ><span class="adc">立即预订</span></router-link
            >
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <router-link :to="`/order?nums=${name[5]}`">
              <img :src="`/imags/${pic[5]}`" />
              <span class="aum" style="text-decoration: none">{{
                name[5]
              }}</span></router-link
            >
            <div class="sty">{{ title[5] }}</div>
            <div class="add">￥{{ price[5] }}<span> 起</span></div>
            <router-link :to="`/order?nums=${name[5]}`"
              ><span class="adc">立即预订</span></router-link
            >
          </div>
        </el-col>
      </el-row>
    </div>
    <yewei></yewei>
  </div>
</template>

<script>
import axios from "axios";
import YeTou from "../components/YeTou.vue";
import DaoHang from "../components/DaoHang.vue";
import Yewei from "../components/Yewei.vue";

export default {
  components: {
    YeTou,
    DaoHang,
    Yewei,
  },
  data() {
    return {
      pic: [],
      title: [],
      price: [],
      name: [],
    };
  },
  mounted() {
    console.log(this.$route.query.loc);
    this.$axios
      .get(`/location/lists/${this.$route.query.loc}`)
      .then((result) => {
        console.log(result);
        let res = result.data.data;
        for (var i in res) {
          // console.log(res[i].lpic)
          this.pic.push(res[i].lpic);
          this.title.push(res[i].ltitle);
          this.price.push(res[i].lprice);
          this.name.push(res[i].lname);
        }
      });
  },
};
</script>

<style scoped>
a {
  text-decoration: none !important;
}
.sty {
  margin: 5px 0;
  padding: 5px 10px;
  font-size: 13px;
}
.add {
  display: inline-block;
  margin-left: 10px;
  font-size: 28px;
  color: #91a500;
}
.adc {
  margin-top: 0;
  padding: 7px 30px 7px 20px;
  float: right;
  margin: 8px 10px 0 0;
  padding: 5px 25px 5px 15px;
  color: #fff;
  text-decoration: none;
  background-color: #4c864c;
  border-radius: 3px;
  position: relative;
  font-size: 14px;
}
.aum {
  width: 100%;
  padding: 0 10px;
  line-height: 40px;
  font-size: 20px;
  left: 0;
  bottom: 0;
  color: #409eed;
}

.el-row--flex.is-justify-space-around {
  padding-bottom: 30px;
}
</style>